<template>
  <div class="app-container" v-loading="loading">
    <el-page-header @back="$router.push({ path: 'index' })" content="组件编辑">
    </el-page-header>
    <br />
    <el-row>
      <el-button type="primary" @click="commit">保存</el-button>
      <!-- <el-button @click="$refs.previewForm.show({ id: form.id })"
        >预览</el-button
      > -->
    </el-row>
    <br />

    <div class="div-editpanel">
      <el-row class="editpanel-box">
        <el-col :span="16" class="editpanel-box">
          <div class="div-editpanel-content">
             <el-form ref="form" :model="form" label-width="80px" label-position="top" class="editpanel-box">
               <componentPreview :view="form" ></componentPreview>
             </el-form>
            
          </div>
        </el-col>
        <el-col :span="8" class="editpanel-box">
          <div class="div-editpanel-content">
            <componentEdit :component="component"></componentEdit>
          </div>
        </el-col>
      </el-row>
    </div>

    <previewForm ref="previewForm"></previewForm>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";
import previewForm from "./previewForm";
import componentEdit from "./componentEdit";
import componentPreview from './componentPreview';


export default {
  components: { previewForm, componentEdit,componentPreview },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    },
    getResourceUrl(fileId) {
      debugger;
      return resourceApi.getResourceUrl(fileId);
    }
  },
  computed: {
    component() {
      return {
        view: this.form
      };
    }
  },
  data() {
    return {
      codeEditor: {},
      form: {
        code: "",
        codes: "",
        htmlbody: "",
        cover: {
          fileId: "",
          fileName: ""
        },
        description: "",
        headLinks: "",
        id: "",
        name: "",
        resources: [
          {
            fileId: "",
            fileName: ""
          }
        ],
        size: {
          height: 0,
          width: 0
        },
        updateTime: ""
      },
      loading: true,
      listLoading: true,
      editor: null
    };
  },
  created() {
    this.listLoading = false;
  },
  mounted() {
    //this.loadCodeEditor();
    this.loadData();
  },
  methods: {
    goBack() {},

    loadData() {
      debugger;
      this.loading = true;
      if (!this.$route.query.id) return;
      this.$store
        .dispatch("viewComponent/get", this.$route.query.id)
        .then(res => {
          res.cover = res.cover || {};
          res.size = res.size || {};
          res.resources = res.resources || [];

          this.form = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    commit(callback) {
      const _this = this;
      return this.$refs["form"]
        .validate()
        .then(() => {
          this.loading = true;
          this.$store
            .dispatch("viewComponent/update", this.form)
            .then(res => {
              this.loading = false;
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            })
            .catch(() => {
              this.loading = false;
            });
        })

        .catch(e => {
          _this.loading = false;
          console.log("error submit!!",e);
        });
    },

    onCoverUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];

      if (!this.form.cover) this.$set(this.form, "cover", {});

      this.$set(this.form.cover, "fileId", fileItem.id);
      this.$set(this.form.cover, "fileName", fileItem.fileName);
    },
    onResourceUploadSuccessHandler(response, file, fileList) {
      debugger;
      let fileItem = response.data[0];
      if (!this.form.resources) this.$set(this.form, "resources", []);
      response.data.forEach(fileItem => {
        this.form.resources.push({
          fileId: fileItem.id,
          fileName: fileItem.fileName
        });
      });
    },
    deleteResource(index) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.form.resources.splice(index, 1);
      });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.CodeMirror {
  height: 600px;
}

/*编辑面板 */
.div-editpanel {
  left: 0px;
  right: 0px;
  position: absolute;
  top: 100px;
  bottom: 0px;
  overflow: hidden;
}
.div-editpanel .div-editpanel-content {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.div-editpanel .editpanel-box {
  height: 100%;
  padding: 10px;
}
</style>
